@mixin transition() {
    transition: all .2s;
}

@mixin unselect() {
    user-select: none;
}

@mixin clear() {
    &::before,
    &::after {
        content: " ";
        display: table;
    }
    &::after {
        clear: both;
    }
}

@mixin ellipsis($n) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $n;
}

//滚动条美化
@mixin beauty-scroll() {
    -ms-overflow-style: none;
    position: relative;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background: #90939980;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
        border-radius: 6px;
        background: #90939910;
    }
}

@mixin beauty-scroll-thin() {
    -ms-overflow-style: none;
    position: relative;
    &::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #90939980;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
        border-radius: 3px;
        background: #90939910;
    }
}

//三角
@mixin triangle() {
    width: 0;
    height: 0;
    border: 6px dashed transparent;
    border-top: 6px solid rgba(255, 255, 255, .7);
    overflow: hidden;
    transition: all .2s;
}

@mixin red() {
    color: green;
}